<template>
  <div>
    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '80%' }"
    >
      <van-nav-bar
        class="nav"
        title="选择产品"
        left-text="返回"
        right-text="确定"
        @click-right="onClickRight"
        left-arrow
        @click-left="onClickLeft"
      />
      <div style="height: 50px"></div>
      <van-search
        class="acccc"
        placeholder="请输入产品名称"
        @search="search"
        v-model="queryParam.Keyword"
        @clear="clear"
      />

      <ul id="UlBox" class="outerBox">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <li class="ckbxcli" v-for="(item, index) in data" :key="index">
            <p @click="customerChoice(item, index)" style="margin-top: 8px">
              <van-field readonly v-model="item.cInvName" />
              <van-field readonly label="编码:" v-model="item.cInvCode" />
              <van-checkbox
                class="checked"
                v-model="item.checked"
              ></van-checkbox>
            </p>
          </li>
        </van-list>
        <div v-if="isSearchProduct" class="search-none">
          <img src="../assets/search.png" alt="">
          <h4 style="color:#6C6C6C;margin-top:5px">产品检索</h4>
        </div>
      </ul>

      <!-- <PaginationCom :pagination="pagination" :Total="Total" :thisOjb="this" /> -->
    </van-popup>
  </div>
</template>

<script>
// import PaginationCom from "@/components/PaginationCom.vue";
import {
  Col,
  Cell,
  CellGroup,
  Picker,
  Popup,
  Search,
  Field,
  Loading,
  Toast,
  NavBar,
  Pagination,
  Checkbox
} from "vant";

export default {
  components: {
    // PaginationCom,
    "van-checkbox": Checkbox,
    "van-nav-bar": NavBar,
    "van-pagination": Pagination,
    "van-picker": Picker,
    "van-popup": Popup, //弹层
    "van-search": Search, //搜索
    "van-field": Field,
    "van-col": Col,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    "van-loading": Loading
  },
  data() {
    return {
      isSearchProduct:false,
      Prceid: "",
      prd: {},
      pageNo: 1,
      PageRows: 10,
      prdlist: [],
      loading: false,
      finished: false,
      pagination: {
        current: 1,
        pageSize: 15,
        showTotal: (total, range) =>
          `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ["15", "30", "60"], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      Total: 0,
      selectedRowKeys: [],
      queryParam: {},
      entity: {},
      judgment: true,
      data: [],
      show: false,
      Id: ""
    };
  },
  created(){
     // 初始默认检索提示
     this.isSearchProduct=true
  },
  methods: {
    paginationchange(a, b) {
      this.pagination.current = a;
      this.getDataList();
    },
    //返回
    onClickLeft() {
      // 数据重置
      this.data=[]
      this.entity={}
      this.show = false;
      // 显示检索提示
      this.isSearchProduct=true
      //返回时候清空输入框的值
      this.queryParam.Keyword=""
    },
    onLoad() {
      // if (this.pageNo * this.PageRows < this.Total) {
        // 是否有进行搜索了
        

      this.PageRows += 20;
      // 停止加载
      this.loading=false
      // } else {
      //   Toast.clear();
      // }
    },
    clear() {
      this.queryParam = [];
      this.getDataList();
    },
    //搜索
    search(value) {
      this.isSearchProduct=false
      console.log(value);
      // if (this.finished) {
      this.queryParam.Condition = "cInvName";
      this.queryParam.Keyword = value;
      // this.pageNo = 1;
      // this.PageRows = 9999;
      this.getDataList();
      // }else{
      //   alert(this.data.length)
      //   // console.log(this.data.length );
      //   Toast('请等数据加载完后再进行查找')
      // }
    },

    customerChoice(item, index) {
      this.$set(item, "checked", !item.checked);
    },
    //选中后确定按钮
    onClickRight() {
      this.prdlist = this.data.filter(item => item.checked == true);

      this.$emit("Product", this.prdlist);
      this.show = false;
      // 重置化显示检索信息
      this.isSearchProduct=true
      this.data=[]
      this.queryParam.Keyword=""
    },
    // 获取样品产品列表数据
    getDataList() {
      this.loading = true;
      this.http
        .post("/ProductManagement/Inventory/GetDataList", {
          PageIndex: this.pageNo,
          PageRows: this.PageRows,
          SortField: "Id",
          SortType: "asc",
          Search: {
            Condition: this.queryParam.Condition,
            Keyword: this.queryParam.Keyword
          }
        })
        .then(resJson => {
          // Toast.clear();

          this.data = resJson.Data;
          this.Total = resJson.Total;
          this.loading = false;
          if (this.data.length >= resJson.Total) {
            this.finished = true;
          } else {
            this.finished = false;
          }
        });
    },
    init() {
      this.show = true;
      this.prdlist = [];
    },
    openForm(RuleMainId) {
      this.init();
      // Toast.loading({
      //   duration: 0, // 持续展示 toast
      //   forbidClick: true,
      //   message: "加载中..."
      // });
      this.Prceid = RuleMainId;
      if (RuleMainId) {
        this.http
          .post("/ProductManagement/Inventory/GetDataListByRuleMainId", {
            PageIndex: this.pagination.current,
            PageRows: this.pagination.pageSize,
            SortField: "Id",
            SortType: "asc",
            Search: {
              Condition: this.queryParam.Condition,
              Keyword: this.queryParam.Keyword,
              RuleMainId: RuleMainId
            }
          })
          .then(resJson => {
            this.data = resJson.Data;
            this.Total = resJson.Total;
            // console.log(this.List);
          });
      } else {
        // this.getDataList();
        // 停止加载
        this.loading=false
      }
    }
  }
};
</script>

<style scoped>
.search-none{
  height:100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pagination {
  position: absolute;
  bottom: 5px;
  right: 20%;
}
.checked {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10%;
}
.outerBox {
  height: calc(100vh - 150px);
  padding-bottom: 60px;
  box-sizing: border-box;
  overflow: auto;
}
.nav {
  position: fixed;
  width: 100%;
}
.ckbxcli {
  position: relative;
  border: 1px solid Gainsboro;
  width: 95%;
  /* height: 100px; */
  text-align: center;
  margin-left: 2%;
  margin-top: 6px;
  margin-bottom: 6px;
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 2px;
  cursor: pointer;
  padding-top: 6px;
  list-style-type: none;
  display: inline-block;
}
ul {
  /* margin-top: 10px; */
}
</style>
